<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:47:06
-->
<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      @init-params="initParams"
    >
      <span
        slot="authState"
        slot-scope="scope"
        :style="`color: ${ authStateName(scope.value.authState)._color }`"
      >
        {{ authStateName(scope.value.authState)._name }}
      </span>
      <span
        slot="memberState"
        slot-scope="scope"
        :style="`color: ${scope.value.memberState === 1 ? '#67C23A' : '#F56C6C'}`"
      >
        {{ scope.value.memberState === 1 ? '正常' :
          scope.value.memberState === 2 ? '禁用' : ''
        }}
      </span>
      <template slot="operate" slot-scope="scope">
        <el-button v-if="scope.value.authState == 0" type="text" size="small" @click="getAuthDetail(scope.value)">认证</el-button>
        <el-button type="text" size="small" @click="forbidden(scope.value)">
          <span  :style="`color: ${scope.value.memberState === 1 ? '' : '#F56C6C'}`">
            {{ scope.value.memberState == 1 ?  '禁用' : '解禁' }}
          </span>
        </el-button>
        <el-button type="text" size="small" @click="goMemberDetail(scope.value)">会员详情</el-button>
      </template>
    </tab-list>
    <el-dialog
      title="用户认证"
      :visible.sync="authShow"
      :close-on-click-modal="false"
      width="30%"
    >
      <text-list :text-list="textLists" :detail-info="detailInfo" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="attestation(1, detailInfo.memberId)">同 意</el-button>
        <el-button @click="attestation(0, detailInfo.memberId)">拒 绝</el-button>
      </span>
    </el-dialog>
    <!-- 禁用/解禁 -->
    <el-dialog
      v-if="forbidBox"
      title="禁用用户"
      :visible.sync="forbidBox"
      :close-on-click-modal="false"
      width="40%"
      > 
        <edit-form
          ref="form"
          :form="form"
          :edit-list="setList"
          :rules="rules"
          validate-on-rule-change
          @close="closeDialog()"
          @on-submit="addOrEdit()"/>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary"  @click="$refs.form.ruleFrom()">确 定</el-button>
              <el-button @click="forbidBox = false">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import textList from '@/components/admin/text-list.vue'
import editForm from '@/components/admin/edit-form.vue'

// 公共方法
import { asyncApiFun, openMessageBox } from '@/utils/utils'
// 接口
import { menberList, memberDj, memberAuthDetail, memberAuth, memberForbidden ,getMemberInfo ,tagDownList} from '@/api/member.js'
// 页面配置
import { listHedar, searchs, textLists,setList } from './config/list.config.js'


export default {
  components: {
    tabList,
    textList,
    editForm
  },
  data() {
    return {
      authShow: false,
      searchs,
      textLists,
      params: {},
      listHedar,
      setList, //禁用框配置
      apiFunction: menberList,
      detailInfo: {},
      detailInfo2:{},//发送到会员档案的信息
      forbidBox:false,
      form:{expire:''}, //禁用
      rules: { expire: 
              [{ required: true, message: '有效时长不能为空'},{ type: 'number',message: '必须为数字值'}]
          },
      bizId:'',  //业务ID  
    }
  },
  created() {
    this.getTagDownList()
    // query不为空，发送网络请求
    const param = {
      tagId:this.$route.query?.tagId 
    }
    if (param.tagId) {
       this.params = param
       this.$refs.list && this.$refs.list.getList()
    }
  },
  computed: {
    authStateName() {
      return function(statu) {
        let _name = ''
        let _color = ''
        switch (statu) {
          case 0:
            _name = '待审核'
            _color = '#F56C6C'
            break
          case 1:
            _name = '已认证'
            _color = '#67C23A'
            break
          case 2:
            _name = '认证失败'
            _color = '#909399'
            break
          default:
            _name = '未认证'
            _color = '#909399'
            break
        }
        return { _name, _color }
      }
    }
  },
  methods: {
    // 获取会员认证详情
    async getAuthDetail({ memberId }) {
      const [res] = await asyncApiFun(memberAuthDetail, memberId)
      if (res) {
        this.authShow = true;
        res.data.gender = res.data.gender == '0' ? '女' : '男';
        this.detailInfo = res.data
      }
    },
    // 认证会员
    async attestation(type, memberId) {
      // type 1通过 0不通过
      const [res] = await asyncApiFun(memberAuth, type, memberId)
      if (res) {
        this.authShow = false
        this.$refs.list.getList()
      }
    },
    // 冻结会员
    frozen({ memberId, accountNonLocked }) {
      const _content = `${accountNonLocked ? '冻结' : '解冻'}后，用户将${accountNonLocked ? '不能再次' : '能够重新'}登录系统，是否确认？`
      const _title = `${accountNonLocked ? '冻结' : '解冻'}用户`
      openMessageBox({
        content: _content,
        title: _title
      }, async boole => {
        if (boole) {
          const params = {
            bizId: memberId,
            freeze: accountNonLocked
          }
          const [res] = await asyncApiFun(memberDj, params)
          if (res) this.$refs.list.getList()
        }
      })
    },
    // 禁用会员
    forbidden({ memberId, memberState }) {
      const _content = `${memberState == 2 ? '解禁' : '禁用'}后，用户将${memberState == 1? '不能再次' : '能够重新'}登录系统，是否确认？`
      const _title = `${memberState== 2 ? '解禁' : '禁用'}用户`
      if(memberState == 1){
        this.forbidBox = true
        this.bizId = memberId
      }
      else {
    // 解禁
       openMessageBox({
        content: _content,
        title: _title
        }, async boole => {
          if (boole) {
            const params = {
              bizId: memberId,
              freeze: false
            }
            const [res] = await asyncApiFun(memberForbidden, params)
            if (res) this.$refs.list.getList()
            this.forbidBox = false
            this.$message({
            message: '解禁成功',
            type: 'success'});
          }
       })
      }
     },
    // 禁用
    async addOrEdit(){
      //  1.发送网络请求
        const params = {
          bizId:this.bizId,
          duration:Number(this.form.expire),
          isPermanent:this.form.expire == 0 ? true:false ,
          freeze: true,
        }
         const [res] = await asyncApiFun(memberForbidden, params)
         this.forbidBox = false
         if(res) this.$refs.list.getList()  
     },
    // 跳转到会员详情
    async goMemberDetail({ memberId }) {
      this.$router.push({ path: '/Profile?memberId='+ memberId})
      
    },
    // 会员标签下拉列表
    async getTagDownList(){
      const [res] = await asyncApiFun(tagDownList)
      if(res){
       this.searchs.filter(item =>{
          if(item.key == 'tagId'){
             item.selectList = item.handlerDate(res.data)
          }
        })
      }
    },
    // 关闭弹窗
    closeDialog(){
        
        this.$refs.form.resetForm();
    },
    // 初始化列表请求参数
    initParams(param) {
      this.params = param

    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog{
    max-height: 80%;
    overflow: auto;
  }
</style>
